import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:myshop/app/utils/screenAdapter.dart';
import '../controllers/productlist_controller.dart';
import '../../../common/widget/customizeAppBar.dart';
import '../../../service/HttpsClient.dart';
import '../../../utils/sortType.dart'; // 引入头部筛选枚举类

class ProductlistView extends GetView<ProductlistController> {
  const ProductlistView({super.key});

  Widget _headerFilter() {
    return Positioned(
      // top: 0,
      // left: 0,
      // right: 0,
      child: Container(
        height: ScreenAdapter.height(130),
        // width: double.infinity,
        padding: EdgeInsets.only(
          left: ScreenAdapter.width(60),
          right: ScreenAdapter.width(60),
        ),
        color: Colors.white,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween, // 水平方向两端对齐
          crossAxisAlignment: CrossAxisAlignment.center, // 垂直居中
          children: controller.subHeaderList
              .map(
                (item) => Obx(
                  () => Row(
                    children: [
                      InkWell(
                        child: Text(
                          item.title,
                          style: TextStyle(
                            color: item.id == controller.activeIndex.value
                                ? Colors.orange
                                : Colors.black26,
                          ),
                        ),
                        onTap: () {
                          controller.sortName = item.field!;
                          controller.changedIndex(item.id);
                        },
                      ),
                      FilterType.filter.id != item.id
                          ? _upOrDownIcon(isUp: controller.sortType.value ==  "1" ? true : false, sortName: item.field!, index: item.id)
                          : Text(""),
                    ],
                  ),
                ),
              )
              .toList(),
        ),
      ),
    );
  }

  // 当前isUp是否是true处于升序
  Widget _upOrDownIcon({required bool isUp, required String sortName, required int index}) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center, // 垂直居中
      children: [
        InkWell(
          child: SizedBox(
            height: ScreenAdapter.height(34),
            width: ScreenAdapter.width(44),
            child: Icon(
              Icons.arrow_drop_up,
              color: isUp &&  sortName == controller.sortName ? Colors.orange : Colors.black26,
              size: ScreenAdapter.fontSize(34),
            ),
          ),
          onTap: () {
            // 去升序
            controller.sortType.value = "1";
            controller.sortName = sortName; // 排序字段
            controller.changedIndex(index);// 排序字段的索引
            // controller.refreshProductListData();
          },
        ),
        InkWell(
          child: SizedBox(
            height: ScreenAdapter.height(34),
            width: ScreenAdapter.width(44),
            child: Icon(
              Icons.arrow_drop_down,
              color: isUp  && sortName == controller.sortName? Colors.black26 : Colors.orange,
              size: ScreenAdapter.fontSize(34),
            ),
          ),
          onTap: () {
            controller.sortType.value = "-1";
            controller.sortName = sortName; // 排序字段
            controller.changedIndex(index);// 排序字段的索引
            // controller.refreshProductListData();
          },
        ),
      ],
    );
  }

  Widget _goodsList() {
    return Container(
      margin: EdgeInsets.only(top: ScreenAdapter.height(100)),
      color: Color.fromARGB(184, 243, 243, 243),
      padding: EdgeInsets.all(ScreenAdapter.width(20)),
      child: Obx(
        () => controller.productList.isNotEmpty
            ? ListView.builder(
                controller: controller.scrollController,
                itemBuilder: (BuildContext context, int index) {
                  return Column(
                    children: [
                      _goodsItem(index),
                      controller.productList.length - 1 == index
                          ? _progressIndicator()
                          : SizedBox(
                              height: 0,
                              width: 0,
                            ), // 最后一个item加载loading在页面底部拉取的时候加载
                    ],
                  );
                },
                itemCount: controller.productList.length,
              )
            : _progressIndicator(), // 在数据回来之前加载loading
      ),
    ); // 商品列表
  }

  //  自定义Loading组件
  Widget _progressIndicator() {
    if (controller.hasData.value) {
      return const Center(child: CircularProgressIndicator());
    } else {
      return const Center(child: Text("没有更多数据了,我是有底线的"));
    }
  }

  // goodsItem
  Widget _goodsItem(int index) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(ScreenAdapter.radius(20)),
        color: Colors.white,
      ),
      padding: EdgeInsets.fromLTRB(
        ScreenAdapter.width(60),
        ScreenAdapter.height(40),
        ScreenAdapter.width(30),
        ScreenAdapter.height(60),
      ),
      margin: EdgeInsets.only(
        top: ScreenAdapter.height(20),
        bottom: ScreenAdapter.height(20),
      ),
      child: Obx(
        () => Row(
          crossAxisAlignment: CrossAxisAlignment.start, // 子组件顶部对齐
          children: [
            Container(
              width: ScreenAdapter.width(210),
              // height: ScreenAdapter.height(200),
              child: Image.network(
                HttpsClient.getImgUrl(controller.productList[index].sPic!),
                fit: BoxFit.fitHeight,  // 图片高度铺满容器高度
              ),
            ), // 图片容器
            SizedBox(width: ScreenAdapter.width(90)),
            Expanded(
              flex: 1,
              child: Container(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      "${controller.productList[index].title}",
                      style: TextStyle(
                        fontSize: ScreenAdapter.fontSize(38),
                        fontWeight: FontWeight.bold,
                      ),
                    ), // 一级标题
                    Text(
                      "${controller.productList[index].subTitle}",
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(fontSize: ScreenAdapter.fontSize(28)),
                    ), // 二级标题
                    Container(
                      margin: EdgeInsets.only(top: ScreenAdapter.height(20)),
                      child: Row(
                        children: [
                          Expanded(
                            flex: 1,
                            child: Column(
                              children: [
                                Text(
                                  "CPU",
                                  style: TextStyle(
                                    fontSize: ScreenAdapter.fontSize(30),
                                    fontWeight: FontWeight.bold,
                                  ),
                                ), // CPU
                                Text(
                                  "天玑810",
                                  style: TextStyle(
                                    fontSize: ScreenAdapter.fontSize(30),
                                    color: Color.fromARGB(187, 185, 185, 185),
                                  ),
                                ), // 核数
                              ],
                            ),
                          ), // 第一个参数
                          Expanded(
                            child: Container(
                              padding: EdgeInsets.only(
                                left: ScreenAdapter.width(20),
                                right: ScreenAdapter.height(20),
                              ),
                              decoration: BoxDecoration(
                                border: Border(
                                  left: BorderSide(
                                    width: 1,
                                    color: Colors.black26,
                                  ),
                                  right: BorderSide(
                                    width: 1,
                                    color: Colors.black26,
                                  ),
                                ),
                              ),
                              child: Column(
                                children: [
                                  Text(
                                    "双向摄像头",
                                    style: TextStyle(
                                      fontSize: ScreenAdapter.fontSize(30),
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ), // CPU
                                  Text(
                                    "5000万+8说的就是我请大家但是",
                                    overflow: TextOverflow.ellipsis,
                                    style: TextStyle(
                                      fontSize: ScreenAdapter.fontSize(30),
                                      color: Color.fromARGB(187, 185, 185, 185),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ), // 第二个参数
                          Expanded(
                            flex: 1,
                            child: Column(
                              children: [
                                Text(
                                  "超大屏",
                                  style: TextStyle(
                                    fontSize: ScreenAdapter.fontSize(30),
                                    fontWeight: FontWeight.bold,
                                  ),
                                ), // CPU
                                Text(
                                  "6.67英寸",
                                  style: TextStyle(
                                    fontSize: ScreenAdapter.fontSize(30),
                                    color: Color.fromARGB(187, 185, 185, 185),
                                  ),
                                ),
                              ],
                            ),
                          ), // 第三个参数
                        ],
                      ),
                    ),
                    SizedBox(height: ScreenAdapter.height(20)), // 重点参数
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.baseline, // 基线对齐
                      textBaseline: TextBaseline.alphabetic, // 基线类型
                      children: [
                        Text(
                          "￥${controller.productList[index].price}",
                          style: TextStyle(
                            fontSize: ScreenAdapter.fontSize(38),
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        SizedBox(width: ScreenAdapter.width(10)),
                        Text(
                          "起",
                          style: TextStyle(
                            fontSize: ScreenAdapter.fontSize(20),
                          ),
                        ),
                      ],
                    ), // 价格
                  ],
                ),
              ), // 右边内容详情
            ),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: controller.scaffoldGlobalKey, // 用来控制抽屉
      appBar: MyAppBar(
        showSearchFlag: "navigator", // 用来导航跳转
        initialTitle: Get.arguments["keywords"] ?? "搜索商品",
        actions: [const Text("")],
        onSearch: (){
          Get.offAndToNamed("/search");// 关闭当前页面并跳转到search页面
        } ,
      ), // 空的Text组件覆盖原来的抽屉按钮
      body: Stack(children: [_goodsList(), _headerFilter()]),
      endDrawer: const Drawer(child: DrawerHeader(child: Text("右侧筛选"))),
    );
  }
}
